<template>
  <div>
    <card>
      <template slot="content">
        <div class="form-head">
          <el-form class="search-form" size="small">
            <el-form-item label="">
              <el-input v-model="query.roleName" placeholder="搜索角色"></el-input>
            </el-form-item>
            <el-button type="primary" plain icon="el-icon-search" @click="onSearch">查询</el-button>
          </el-form>
          <el-button type="primary" icon="el-icon-plus" @click="addRole">添加</el-button>
        </div>
      </template>
    </card>
    <card>
      <el-table ref="table" slot="content" :data="rows" stripe row-key="id" v-loading="loading" class="table-fixed">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column v-for="(item, index) in columns" :key="item.prop + index" :prop="item.prop" :label="item.label" :width="item.width">
          <template slot-scope="{ row }">
            <span v-if="item.prop === 'roleType'">
              {{ row.roleType === "0" ? "系统定制" : "" }}
            </span>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" fixed="right">
          <template slot-scope="{ row }">
            <!-- <el-button size="mini" type="primary" plain="" @click="memberRow(row)">成员管理</el-button> -->
            <!-- <el-button size="mini" type="primary" plain="" @click="detailRow(row)">详情</el-button> -->
            <el-button size="mini" type="primary" plain="" @click="authRow(row)">菜单权限</el-button>
            <!-- <el-button size="mini" type="primary" plain="" @click="editRow(row)">编辑</el-button> -->
            <!-- <el-button size="mini" type="primary" plain="" @click="delRow(row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination slot="content" :total="total" :page.sync="query.pageNum" :pageSize="query.pageSize" @pageChange="getList" />
    </card>
    <addDialog ref="addDialog" @success="getList" :visible.sync="addDialog.visible" :dialogData="currentRow" :cascaderList="cascaderList"></addDialog>
    <memberDialog ref="memberDialog" @success="getList" :visible.sync="memberDialog.visible" :dialogData="currentRow"></memberDialog>
    <detailDialog ref="detailDialog" @success="getList" :visible.sync="detailDialog.visible" :dialogData="currentRow"></detailDialog>
    <authDialog ref="authDialog" @success="getList" :visible.sync="authDialog.visible" :dialogData="currentRow" :cascaderList="cascaderList"></authDialog>
  </div>
</template>

<script>
import card from "@/components/card/index.vue";

import * as menuApi from "@/api/uias/menu";
import * as roleApi from "@/api/uias/role";
import { timeRemaining } from "@/utils/filters";
import * as mixins from "@/utils/mixins";
import addDialog from "./components/addDialog";
import memberDialog from "./components/memberDialog";
import detailDialog from "./components/detailDialog";
import authDialog from "./components/authDialog";
import pagination from "@/components/pagination.vue";

export default {
  name: "organization",
  mixins: [mixins.affirm],
  components: { card, addDialog, memberDialog, detailDialog, authDialog, pagination },
  filters: { timeRemaining },
  data() {
    return {
      loading: true,
      rows: [],
      columns: [
        { label: "角色名称", prop: "roleName" },
        { label: "角色类型", prop: "roleType" },
        { label: "角色描述", prop: "remark" },
        { label: "创建时间", prop: "createTime" },
        // { label: "创建人", prop: "menuUrl" },
        { label: "修改时间", prop: "updateTime" },
        // { label: "修改人", prop: "pid" },
      ],
      addDialog: {
        visible: false,
      },
      memberDialog: {
        visible: false,
      },
      detailDialog: {
        visible: false,
      },
      authDialog: {
        visible: false,
      },
      query: {
        roleName: "",
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      currentRow: {},
      cascaderList: [],
    };
  },
  created() {
    this.getTree();
    this.getList();
  },
  methods: {
    onSearch() {
      this.query.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      roleApi
        .getListRole({
          ...this.query,
        })
        .then((res) => {
          this.rows = res.result.list;
          this.total = Number(res.result.total);
        })
        .finally(() => (this.loading = false));
    },

    addRole() {
      this.addDialog.visible = true;
    },
    memberRow(row) {
      this.memberDialog.visible = true;
      this.currentRow = row;
    },
    detailRow(row) {
      this.detailDialog.visible = true;
      this.currentRow = row;
    },
    authRow(row) {
      this.authDialog.visible = true;
      this.currentRow = row;
    },
    editRow(row) {
      this.addDialog.visible = true;
      this.currentRow = row;
    },
    getTree() {
      menuApi
        .getListMenu()
        .then((res) => {
          const data = res.result;
          this.removeEmpty(data);
          this.cascaderList = data;
        })
        .finally();
    },
    delRow(row) {
      this.confirm("确定删除吗？").then(() => {
        roleApi.delRole({ id: row.id }).then((res) => {
          if (res.result) {
            this.$message.warning(res.result);
          } else {
            this.getList();
            this.$message.success("删除成功");
          }
        });
      });
    },
    removeEmpty(obj) {
      obj.forEach((item) => {
        if (item.menuVOS.length) {
          this.removeEmpty(item.menuVOS);
        } else {
          item.menuVOS = null;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search-form {
  display: flex;
  width: auto;
  .el-form-item {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 0;
  }
}
.table-fixed {
  /deep/.el-table__fixed-header-wrapper {
    .el-table__header {
      .el-table__cell {
        background-color: #f5f9ff;
        height: 60px;
      }
    }
  }
}
</style>
